<template>
  <div class="CatalogContent">
    <!-- 免费试听 -->
    <div class="CatalogContent-free-audio">
      <!-- trial_articles -->
      <h3>免费试听</h3>
      <div class="CatalogContent-free-list">
        <!-- 每条音乐组件 -->
        <catalog-free-audio
          v-for="FreeList in CatalogFreeList"
          :key="FreeList.article_id"
          :FreeList="FreeList"
          :AudioUrl="AudioUrl"
          @ended="PlayStart('')"
        ></catalog-free-audio>
        <!-- 音乐标签 -->
        <audio ref="Audio" :src="AudioUrl">1111</audio>
      </div>
    </div>
  </div>
</template>

<script>
import CatalogFreeAudio from "./CatalogFreeAudio.vue";
export default {
  name: "CatalogContent",
  props: ["ItemContent"],
  components: {
    CatalogFreeAudio,
  },
  data() {
    return {
      // 免费试听列表
      CatalogFreeList: [],

      // 控制音乐播放
      isPlay: false,
      AudioUrl: "",
    };
  },
  mounted() {
    // 定义音乐信息列表数据
    this.$nextTick(() => {
      // 免费试听列表
      this.CatalogFreeList = this.ItemContent.trial_articles;
      console.log(this.CatalogFreeList);
      // 接收url
      this.$bus.$on("GetAudioUrl", this.PlayStart);
    });
  },
  
  methods: {
    // 音频点击标签
    PlayStart(data) {
      // console.log("音乐url", data);
      this.AudioUrl = data;
      if (!data) {
        // 这里要联动到别的地方 先做好准备
        this.isPlay = false;
        this.$refs.Audio.pause();
        return;
      }

      //   console.log(this.$refs.Audio);
      this.$nextTick(() => {
        // 这里要联动到别的地方 先做好准备
        this.isPlay = true;
        this.$refs.Audio.play();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.CatalogContent {
  // 免费试听
  .CatalogContent-free-audio {
    h3 {
      margin: 0.625rem;
    }
    .CatalogContent-free-list {
      font-size: 0.8125rem;
      padding: 0.875rem 1.25rem;
      background-color: #f2efe5;
    }
  }
}
</style>